<template>
    <div class="followContainer">
        <div class="myFollowContent">
            <div class="back" @click="goBack"></div>
            <p class="title">我的关注 {{ follows.length }}</p>
            <div class="other"></div>
        </div>
        <van-search v-model="value" placeholder="搜索我的关注" class="followSearch" shape="round"/>
        <div class="allFollows">
            <ul class="follows">
                <li v-for="follow in follows" :key="follow.id">
                    <div class="follow">
                        <div class="followInfo">
                            <div class="headImg"></div>
                            <div class="info">
                                <p class="name">{{ follow.name }}</p>
                                <p class="intro">{{ follow.intro }}</p>
                            </div>
                        </div>
                        <div class="gotoFollow">
                            <span v-if="!follow.ifFollow" @click="follow.ifFollow=!follow.ifFollow"
                            :style="follow.ifFollow?'color:#999999':'color:#333333'">已关注</span>
                            <span v-if="follow.ifFollow" @click="follow.ifFollow=!follow.ifFollow"
                            :style="follow.ifFollow?'color:#999999':'color:#333333'">取消关注</span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import { Search } from 'vant';
    export default {
        name:'myFollow',
        components:{
            'van-search':Search
        },
        data(){
            return{
                value:'',
                follows:[
                    {id:0,name:'fish',intro:'希望你也很高兴哦',ifFollow:false},
                    {id:1,name:'Kakaoo',intro:'人生天地间，忽如远行客',ifFollow:false},
                    {id:2,name:'三分',intro:'',ifFollow:false},
                    {id:3,name:'米饼',intro:'心平气和是座右铭',ifFollow:false},
                    {id:4,name:'我是豆荚',intro:'快快好起来',ifFollow:true},
                    {id:5,name:'hhhin',intro:'东湖村2号',ifFollow:true},
                    {id:6,name:'AKAtatoo',intro:'',ifFollow:false},
                    {id:7,name:'麦乐鸡',intro:'你想吃麦乐鸡汉堡吗',ifFollow:true},
                    {id:8,name:'某用户',intro:'你想吃麦乐鸡汉堡吗',ifFollow:false},
                ]
            }
        },
        methods:{
            goBack(){
                this.$router.back()
            }
        }
    }
</script>

<style scoped>
    .followContainer{
        width: 100vw;
        height: 100vh;
        overflow-x: hidden;
        overflow-y: scroll;
        scrollbar-width: none; 
    }
    .myFollowContent{
        width: 6.86rem;
        height: 1.76rem;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        left:.32rem;
        z-index: 1;
        background-color: #F6F8FA;
    }
    .back{
        background-image: url(../assets/img/6-icon@2x/back.png);
        width: .32rem;
        height: 0.32rem;
        background-position: center;
        background-size: contain;
    }
    .title{
        font-family: 'PingFangSC-Mediuem';
        color:#333333;
        font-size: .36rem;
    }
    .other{
        width: .32rem;
        height: 0.32rem;
    }
    .followSearch{
        width: 7.2rem;
        margin: 0 auto;
        background-color: #F6F8FA;
        margin-bottom: .3rem;
        margin-top: 1.76rem;
    }
    input::placeholder{
        font-family: 'PingFangSC-Regular';
        color:#333333;
    }
    .allFollows{
        width: 100%;
    }
    .follows{
        width: 6.86rem;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
    }
    .follow{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: .6rem;
    }
    .followInfo{
        display: flex;
        align-items: center;
    }
    .headImg{
        width: .9rem;
        height: .9rem;
        border-radius: 50%;
        border: .02rem solid #333333;
    }
    .info{
        margin-left: .2rem;
    }
    .name{
        font-family: 'PingFangSC-Mediuem';
        color:#333333;
    }
    .intro{
        font-family: 'PingFangSC-Regular';
        color:#999999;
        font-size: .24rem;
        margin-top: .06rem;
    }
    .gotoFollow{
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.4rem;
        height: .8rem;
        font-size: .26rem;
        border-radius: .6rem;
        font-family: 'PingFangSC-Regular';
        color:#333333;
    }
    .gotoFollow span{
        transition: all 1s;
    }
</style>

<style>
    input::placeholder{
        font-family: 'PingFangSC-Regular';
        color:#333333;
    }
</style>